<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>舱次列表管理</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.2.0.css" />
    <style>
        [v-cloak] {
            display: none;
        }

        .expend-cabin-wrapper>span {
            display: inline-block;
            font-size: 14px;
        }

        .aui-btn-info.add-cabin-info-btn {
            position: fixed;
            right: 10px;
            top: 100px;
            z-index: 100;
        }

        .cabin-info {
            position: fixed;
            top: 100px;
            left: 0;
            z-index: 1000;
            height: 100vh;
            width: 100%;
            background-color: rgba(255, 255, 255, 1);
            padding-top: 170px;
        }

        .add-cabin-info {
            width: 100%;
        }

        .aui-btn-sm {
            width: 300px;
            margin: 20px auto;
        }

        .aui-list-item.aui-list-item-middle {
            width: 85%;
            margin: 0 auto;
            border-radius: 10px;
            -moz-box-shadow: 1px 4px 20px #C2C2C2;
            -webkit-box-shadow: 1px 4px 20px #C2C2C2;
            box-shadow: 1px 4px 20px #C2C2C2;
            margin-top: 20px;
        }

        .aui-list-item h3 {
            text-align: center
        }

        .aui-list-item-text {
            margin-top: 5px;
            display: -webkit-flex;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

        .aui-list-item-text>span {
            color: #84c1ff;
            font-size: 14px;
            flex: 1;
            display: block;
            height: 23px;
            line-height: 23px;
        }

        .aui-btn-sm {
            width: 300px;
            margin: 20px auto;
        }

        .aui-card-list-content {
            background-color: #f5f5f5;
            outline: none;
            border: none;
            border: 0;
        }

        .text-header {
            width: 95%;
            font-size: 30px;
            font-weight: bold;
            margin: 0 auto;
            margin: 30px 0;
            padding-left: 30px;
        }

        .text-body {
            width: 95%;
            margin: 0 auto;
            display: -webkit-flex;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

        .text-body>div:nth-child(1) {
            width: 80%;
            padding-left: 30px;
        }

        .text-body>div:nth-child(2) {
            width: 20%;
            color: #24ca29;
        }

        .text-body>div>p:nth-child(1) {
            color: #000;
        }

        .text-body>div>p:nth-child(2) {
            font-size: 17px;
            color: #777;
        }

        .aui-list-img-sm {
            width: 50px;
            height: 100px;
            border-radius: 50%;
        }

        .aui-list.aui-media-list::before {
            display: none !important;
        }

        .aui-form-list {
            position: relative;
        }

        .aui-list-item-form {
            position: absolute;
            width: 60%;
            left: 50%;
            transform: translateX(-50%);
        }

        .aui-list-cender {
            width: 54%;
        }

        .aui-list-cender span {
            padding-right: 30%;
            width: 100%
        }
    </style>
</head>

<body>
    <main id="app">
        <header id="header" class="aui-bar aui-bar-nav">
            <a class="aui-pull-left aui-btn" onclick="closewin()">
                <span class="aui-iconfont aui-icon-left"></span>
            </a>
            <div class="aui-title">氧舱治疗</div>
        </header>

        <div class="text-header">
            治疗次数
        </div>
        <div class="text-body">
            <div>
                <!-- <p>本年度累计开仓：<strong id="KCCS"></strong>次</p> -->
                <p>已排舱人数：<strong id="YPC"></strong>人<span style="padding-left:40px;">未排舱：<strong id="DPC"></strong>人</span></p>
                <p>暂停治疗：<strong id="YZD"></strong>人<span style="padding-left:50px;">长期失约：<strong id="CQSY"></strong>人</span></p>
                <div v-for="(State, index) in CabinState">
                  <p><strong  v-if="State.F_RemindInspect" style="color:#FF2D2D">待核查舱次提醒：{{State.F_bianhao}}。&nbsp;&nbsp;</strong></p>
                </div>
            </div>
            <div>
                详细信息
            </div>
        </div>

        <div class="aui-card-list">
            <div class="aui-card-list-content">
                <ul class="aui-list aui-media-list">
                    <li @click="enterUsersFrame(item.F_id)" class="aui-list-item aui-list-item-middle" v-for="(item, index) in Cabinlist">
                        <h3>{{item.F_Cabin_IDName}}</h3>
                        <div class="aui-media-list-item-inner">
                            <div class="aui-list-item-media"  @click.prevent.stop="Cabin_Record_Frame(item.F_id)">
                                <img src="../image/avatar.jpg" class="aui-img-round aui-list-img-sm" >
                                <div v-if="item.countSR!==0" class="aui-badge">{{item.countSR}}人</div>
                                <div v-else class="aui-badge" style="background-color:#4169E1">{{item.countSR}}人</div>
                            </div>
                            <div class="aui-list-item-inner aui-list-item-arrow">
                                <div class="aui-list-item-text">
                                    <div class="aui-list-item-title aui-font-size-14">舱次编号：{{item.F_bianhao}}</div>
                                    <div class="aui-list-item-title aui-font-size-14" style="padding-right: 50px;">治疗压力: {{item.F_yali}}</div>
                                </div>
                                <div class="aui-list-item-text">
                                    <span>升压时间：{{item.F_jiayaTime}}</span>
                                    <span>稳压时间：{{item.F_wenyaTime}}</span>
                                </div>
                                <div class="aui-list-item-text">
                                    <span>减压时间：{{item.F_jianyaTime}}</span>
                                    <span>出舱时间：{{item.F_chucangTime}}</span>
                                </div>
                                <div class="aui-list-item-text">
                                    <span class="aui-iconfont aui-icon-pencil aui-font-size-14" v-if="item.countSR!==0" @click.prevent.stop="editCabinEvent(item.F_id,item.F_Cabin_ID)" style="color:#4169E1">操舱执行</span>
                                    <span class="aui-iconfont aui-icon-pencil aui-font-size-14" v-else style="color:#4169E1">操舱执行</span>
                                    <!-- <span class="aui-iconfont aui-icon-edit aui-font-size-14" style="color:#4169E1">编辑</span> -->
                                      <span class="aui-iconfont aui-icon-edit aui-font-size-14" @click.prevent.stop="DoctorCheckFrame(item.F_id)" style="color:#4169E1">医师核查</span>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <div class="aui-btn aui-btn-info add-cabin-info-btn" onclick="addCabinInfo()"><span class="aui-iconfont aui-icon-plus"></span>添加舱次</div>

        <div class="cabin-info" id="cabin-info" v-if="cabinStatus" @touchmove.prevent>
            <div class="aui-content aui-margin-b-15">
                <ul class="aui-list aui-form-list">
                    <li class="aui-list-item aui-list-item-form">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label" tr>
                                所属舱室
                            </div>
                            <div class="aui-list-item-input">
                                <select style="padding-left:30%" id="F_Cabin_ID">
                                    <option v-for="(Cabin, index) in CabinInformation" :value="Cabin.F_Id" >{{Cabin.F_code}}</option>
                                </select>
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item aui-list-item-form">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label">
                                舱次编号
                            </div>
                            <div class="aui-list-item-input">
                                <input style="padding-left:30%" type="text" placeholder="舱次编号" id="F_bianhao">
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item aui-list-item-form">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label">
                                升压时间
                            </div>
                            <div class="aui-list-item-input">
                                <input type="text" style="padding-left:30%" id="F_jiayaTime" placeholder="升压时间">
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item aui-list-item-form">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label">
                                稳压时间
                            </div>
                            <div class="aui-list-item-input">
                                <input type="text" style="padding-left:30%" id="F_wenyaTime" placeholder="稳压时间">
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item aui-list-item-form">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label">
                                减压时间
                            </div>
                            <div class="aui-list-item-input">
                                <input type="text" style="padding-left:30%" id="F_jianyaTime" placeholder="减压时间">
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item aui-list-item-form">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label">
                                出舱时间
                            </div>
                            <div class="aui-list-item-input">
                                <input type="text" style="padding-left:30%" id="F_chucangTime" placeholder="出舱时间">
                            </div>
                        </div>
                    </li>
                    <li class="aui-list-item aui-list-item-form">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label">
                                治疗压力
                            </div>
                            <div class="aui-list-item-input">
                                <input style="padding-left:30%" type="text" placeholder="治疗压力" id="F_yali">
                            </div>
                        </div>
                    </li>
                </ul>
                <p class="add-cabin-info">
                    <div class="aui-bar aui-bar-btn aui-bar-btn-round aui-btn-sm" style="width:45%;">
                        <div class="aui-bar-btn-item aui-active" onclick="Cancel()">取消</div>
                        <div class="aui-bar-btn-item" onclick="Add_CabinArrangement()">添加</div>
                    </div>
                </p>
            </div>
        </div>

    </main>
</body>

</html>

<script src="../script/api.js" charset="utf-8"></script>
<script src="../script/vue.js" charset="utf-8"></script>
<script src="../js/ToConfigure.js" charset="utf-8"></script>
<script src="../script/aui-toast.js" charset="utf-8"></script>
<script type="text/javascript">
    var vm = null;
    apiready = function() {
        api.addEventListener({
            name: 'canbin'
        }, function(ret, err) {
            if (ret.value.state == 'no') {
                reloadCanbin();
            }
        });

        vm = new Vue({
            el: '#app',
            data: {
                cabinStatus: false,
                // jianyaDateTime: '选择时间',
                // wenyaDateTime: '选择时间',
                // chucangDateTime: '选择时间',
                // jianyaDateTime: '选择时间',
                // highDateTime: '选择时间',
                Cabinlist: [], //舱次信息
                CabinState: [], //舱次提醒核查状态
                CabinInformation: [], //舱室信息
                Url_IP: ""
            },
            created() {

                //获取所属医院IP地址
                this.Url_IP = ToConfigure_IP("Gorgeous");

                //查询舱次信息
                Query_HO_CabinInformation();
                //查询提醒核查状态
                Query_CabinState();
                api.ajax({
                    url: this.Url_IP + 'HyperbaricOxygen/DeviceManagement/Query_OxygenChamber',
                    method: 'post',
                    data: {
                        values: {
                            parms: ""
                        }
                    },
                }, function(ret, err) {
                    console.log(JSON.stringify(ret));
                    if (ret) {
                        vm.CabinInformation = ret;
                    } else {
                        var toast = new auiToast();
                        toast.fail({
                            title: "暂无舱次信息",
                            duration: 2000
                        });
                    }
                });


                //查询累计开仓次  以及已排仓  未排仓  暂停治疗  长期失约
                api.ajax({
                    url: this.Url_IP + 'HyperbaricOxygen/CabinTreatment/Query_Stop_Promise',
                    method: 'get',
                }, function(ret, err) {
                    if (ret) {
                        if (ret != null && ret != "") {
                            //未排仓
                            document.getElementById("DPC").innerText = ret[0].DPC;
                            //已排仓
                            document.getElementById("YPC").innerText = ret[0].YPC;
                            //暂停治疗
                            document.getElementById("YZD").innerText = ret[0].YZD;
                            //长期失约
                            document.getElementById("CQSY").innerText = ret[0].CQSY;
                            //累计开舱次数
                            // document.getElementById("KCCS").innerText = ret[0].KCCS;
                        }
                    }
                });
            },
            methods: {
                enterPersonPage: function(item) {
                    api.openWin({
                        name: 'personInfo',
                        url: './person-info.html',
                        pageParam: {
                            name: 'personInfo'
                        }
                    });
                },
                enterUsersFrame: function(F_id) {
                    api.openWin({
                        name: 'patient',
                        url: './patient.html',
                        pageParam: {
                            F_id: F_id
                        }
                    });
                },
                editCabinEvent: function(F_id, F_Cabin_ID) {
                    api.openWin({
                        name: 'patient-info-header',
                        url: './patient-info-header.html',
                        pageParam: {
                            F_id: F_id,
                            F_Cabin_ID: F_Cabin_ID
                        }
                    });
                },
                DoctorCheckFrame: function(F_id) {
                        api.openWin({
                            name: 'DoctorCheck-header',
                            url: './DoctorCheck-header.html',
                            pageParam: {
                                F_id: F_id
                            }
                        });
                },
                Cabin_Record_Frame: function(F_id){
                  api.openWin({
                      name: 'Cabin_Record-header',
                      url: './Cabin_Record-header.html',
                      pageParam: {
                          F_id: F_id
                      }
                  });
                }
            }
        })

        var header = $api.byId('header'); // 获取头部
        $api.fixStatusBar(header); // 处理ios兼容
    }

    //查询舱次信息
    function Query_HO_CabinInformation() {
        //获取所属医院IP地址
        var Url_IP = ToConfigure_IP("Gorgeous");
        api.ajax({
            url: Url_IP + 'HyperbaricOxygen/CabinTreatment/Query_HO_CabinInformation',
            method: 'post',
            data: {
                values: {
                    parms: ""
                }
            },
        }, function(ret, err) {
            if (ret) {
                vm.Cabinlist = ret;
            } else {
                var toast = new auiToast();
                toast.fail({
                    title: "暂无舱次信息",
                    duration: 2000
                });
            }
        });
    }

    function Query_CabinState(){
      //获取所属医院IP地址
      var Url_IP = ToConfigure_IP("Gorgeous");
      var Query_JsParms = new Object();
      Query_JsParms.F_RemindInspect = "1";
      var JsonStr = JSON.stringify(Query_JsParms);
      api.ajax({
          url: Url_IP + 'HyperbaricOxygen/CabinTreatment/Query_CabinState',
          method: 'get',
          data: {
              values: {
                  parms: JsonStr
              }
          },
      }, function(ret, err) {
          if (ret) {
              if (ret) {
                vm.CabinState = ret;
              }else {

              }
          }
      });
    }

    function closewin() {
        api.closeWin({
            name: 'enterCabinPage'
        });
    }

    function addCabinInfo() {
        vm.cabinStatus = true
    }

    //取消按钮
    function Cancel() {
        vm.cabinStatus = false;
    }

    //添加舱次信息
    function Add_CabinArrangement() {
        var json = GetParameters();
        //获取所属医院IP地址
        var Url_IP = ToConfigure_IP("Gorgeous");
        api.ajax({
            url: Url_IP + 'HyperbaricOxygen/CabinTreatment/Add_CabinInformation',
            method: 'post',
            data: {
                values: {
                    parms: json
                }
            },
            dataType: 'String',
        }, function(ret, err) {
            var toast = new auiToast();
            if (ret == "True") {
                Query_HO_CabinInformation();
                vm.cabinStatus = false;
                toast.success({
                    title: "提交成功",
                    duration: 2000
                });

                api.openFrame({ // 打开Frame
                    name: 'cabin',
                    url: 'cabin.html',
                });
            } else {
                vm.cabinStatus = false
                toast.fail({
                    title: "提交失败",
                    duration: 2000
                });
            }

        });
    }


    //获取添加舱室信息
    function GetParameters() {
        var JsParms = new Object();
        //舱次编号
        JsParms.F_Cabin_ID = document.getElementById("F_Cabin_ID").value;
        //舱室ID
        JsParms.F_bianhao = document.getElementById("F_bianhao").value;
        //加压时间
        JsParms.F_jiayaTime = document.getElementById("F_jiayaTime").value;
        //减压时间
        JsParms.F_jianyaTime = document.getElementById("F_jianyaTime").value;
        //稳压时间
        JsParms.F_wenyaTime = document.getElementById("F_wenyaTime").value;
        //出舱时间
        JsParms.F_chucangTime = document.getElementById("F_chucangTime").value;
        //压力
        JsParms.F_yali = document.getElementById("F_yali").value;

        return JSON.stringify(JsParms);
    }



    //调用刷新当前页面
    function reloadCanbin() {
        window.location.reload();
    }



    // function getChucangDateTime() {
    //   api.openPicker({
    //       type: 'date',
    //       date: '2019-01-01',
    //       title: '选择开始日期'
    //   }, function(ret, err) {
    //       if (ret) {
    //           api.openPicker({
    //               type: 'time',
    //               date: "2016-07-28 09:00",
    //               title: '请选择时间'
    //           }, function(ret1, err1) {
    //               if (ret1) {
    //                   vm.chucangDateTime = '' + ret1.year +
    //                       '-' + ret1.month +
    //                       '-' + ret1.day +
    //                       ' ' + ret1.hour +
    //                       ':' + ret1.minute
    //               } else {
    //                   console.log(JSON.stringify(err1));
    //               }
    //           });
    //       }
    //   });
    // }

    // function getHighDateTime() {
    //     api.openPicker({
    //         type: 'date',
    //         date: '2019-01-01',
    //         title: '选择开始日期'
    //     }, function(ret, err) {
    //         if (ret) {
    //             api.openPicker({
    //                 type: 'time',
    //                 date: "2016-07-28 09:00",
    //                 title: '请选择时间'
    //             }, function(ret1, err1) {
    //                 if (ret1) {
    //                     vm.highDateTime = '' + ret1.year +
    //                     '-' + ret1.month +
    //                     '-' + ret1.day +
    //                     ' ' + ret1.hour +
    //                     ':' + ret1.minute
    //                 } else {
    //                     console.log(JSON.stringify(err1));
    //                 }
    //             });
    //         }
    //     });
    // }

    // function getWenyaDateTime() {
    //   api.openPicker({
    //       type: 'date',
    //       date: '2019-01-01',
    //       title: '选择开始日期'
    //   }, function(ret, err) {
    //       if (ret) {
    //           api.openPicker({
    //               type: 'time',
    //               date: "2016-07-28 09:00",
    //               title: '请选择时间'
    //           }, function(ret1, err1) {
    //               if (ret1) {
    //                   vm.wenyaDateTime = '' + ret1.year +
    //                   '-' + ret1.month +
    //                   '-' + ret1.day +
    //                   ' ' + ret1.hour +
    //                   ':' + ret1.minute
    //               } else {
    //                   console.log(JSON.stringify(err1));
    //               }
    //           });
    //       }
    //   });
    // }

    // function getJianyaDateTime() {
    //   api.openPicker({
    //       type: 'date',
    //       date: '2019-01-01',
    //       title: '选择开始日期'
    //   }, function(ret, err) {
    //       if (ret) {
    //           api.openPicker({
    //               type: 'time',
    //               date: "2016-07-28 09:00",
    //               title: '请选择时间'
    //           }, function(ret1, err1) {
    //               if (ret1) {
    //                   vm.jianyaDateTime = '' + ret1.year +
    //                   '-' + ret1.month +
    //                   '-' + ret1.day +
    //                   ' ' + ret1.hour +
    //                   ':' + ret1.minute
    //               } else {
    //                   console.log(JSON.stringify(err1));
    //               }
    //           });
    //       }
    //   });
    // }
</script>
